<template>
  <div id="box" style="background-color: black;" v-on:mousewheel="modeScroll ? handelWheel($event) : ''">
    <div class="switch">
      <div class="form-check form-switch ">
          <input class="form-check-input" type="checkbox" role="switch" :title="widthFirst ? '高图模式' : '宽图模式'" v-model="widthFirst">
          <label class="form-check-label">图片显示</label>
      </div>
      <div class="form-check form-switch ">
          <input class="form-check-input" type="checkbox" role="switch" :title="modeScroll ? '滚动' : '单图'" v-model="modeScroll">
          <label class="form-check-label">展示方式</label>
      </div>
    </div>

    <div class="ops" title="上一张" v-if="!modeScroll && singelMode.current != 0" @click="jump(-1)">
      <img src="../../static/img/arrow-bar-up.svg">
    </div>
    <div>
      <img class="img-item" v-bind:id="'img-' + index" v-for="(image, index) in images" v-if="modeScroll ? index < scrollMode.currentBorder : index == singelMode.current" :src="image" :class="widthFirst ? 'width-priority' : 'height-priority'">
    </div>
    <div class="ops" title="下一张" style="top: 94%;" v-if="!modeScroll && singelMode.current != images.length - 1" @click="jump(1)">
      <img src="../../static/img/arrow-bar-down.svg">
    </div>
  </div>
</template>

<script>
  import http from '../utils/http.js'
  import common from '../utils/common.js'
  export default {
    name: 'Display',
    methods: {
      handelWheel(e) {
        console.log('wheel')
        if (e.deltaY > 0 && this.scrollMode.lastOffsetY == e.offsetY) {
          this.scrollMode.currentBorder += this.scrollMode.eachLoadNum;
          return;
        }
        this.scrollMode.lastOffsetY = e.offsetY;
      },
      jump(step) {
        this.singelMode.current += step;
      },
    },
    watch: {
    },
    mounted() {
      let that = this;
      http.get('/one-piece/' + this.$route.query.id, {}, data => {
        data.imageCodes.forEach(imageCode => {
          that.images.push(IMAGE_URL + imageCode);
        });
      })
    },
    data() {
      return {
        widthFirst: true,
        images: [],
        modeScroll: false,
        scrollMode: {
          lastOffsetY: -1,
          eachLoadNum: 5,
          currentBorder: 5,
        },
        singelMode: {
          current: 0,
        }
      }
    }
  }
</script>

<style scoped>
  .switch {
    position:fixed;
    top: 40%;
    right: 0%;
    padding: 5px 10px;
    border-radius: 10px;
    opacity: 0;
  }
  .switch:hover {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  .ops {
    position:fixed;
    left: 45%;
    width: 100px;
    height: 45px;
    text-align: center;
    padding: 0;
    box-sizing: content-box;
    opacity: 0;
  }
  .ops:hover {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  .ops img {
    width: 45px;
    height: 45px;
  }
  .hide {
    display: none;
  }
  .img-item {
    display: block;
    margin: auto;
  }
  .img-item:not(:last-child) {
    margin-bottom: 100px;
  }
  .width-priority {
    width: calc(50vw);
  }
  .height-priority {
    height: calc(100vh);
  }
</style>
